<template>
  <div class="shopping-register">
    <div class="shopping-header">
      <img class="bgimg" src="../../assets/tubiao/shopping_mall_banner.png" />
      <div class="headerBorder"><img src="../../assets/tubiao/user.png"/></div>
      <div class="loginBtn" @click="loginImmediately">立即登录</div>
    </div>
    <div class="shopping-collect">
      <div class="obligation"><i class="iconfont icon-daifukuan shopCont"></i><p>待付款</p></div>
      <div class="waitReceiving"><i class="iconfont icon-daishouhuo shopCont"></i><p>待收货</p></div>
      <div class="afterSale"><i class="iconfont icon-shouhoufuwu shopCont"></i><p>售后/退换货</p></div>
      <div class="allOrders"><i class="iconfont icon-dingdan shopCont"></i><p>订单</p></div>
    </div>
    <div class="myManagement">
      <div><i class="iconfont icon-qianbao orderIcon"></i><span>商城分期订单</span><span class="reimbursement">待还0.0元</span><i class="fa fa-2x fa-angle-right indicate"></i></div>
      <div><i class="iconfont icon-yinxingqia bankIcon"></i><span>我的银行卡</span><i class="fa fa-2x fa-angle-right indicate"></i></div>
      <div @click="addAdminist"><i class="iconfont icon-shouhuodizhi siteIcon"></i><span>收货地址</span><i class="fa fa-2x fa-angle-right indicate"></i></div>
      <div><i class="iconfont icon-youhuiquan discountIcon"></i><span>优惠券</span><i class="fa fa-2x fa-angle-right indicate"></i></div>
    </div>
    <div class="myAssistCont">
      <div><i class="iconfont icon-duanxin feedback"></i><span>我要反馈</span><i class="fa fa-2x fa-angle-right indicate"></i></div>
      <div><i class="iconfont icon-shezhi setting"></i><span>设置</span><i class="fa fa-2x fa-angle-right indicate"></i></div>
      <div><i class="iconfont icon-bangzhuzhongxin assist"></i><span>帮助中心</span><i class="fa fa-2x fa-angle-right indicate"></i></div>
    </div>
    <shopping-footer></shopping-footer>
  </div>
</template>
<script>
export default {
  name: 'shopping-register',
  methods: {
    loginImmediately() {
      this.$router.push('../auth/login');
    },
    addAdminist() {
      if (this.code === 3001) {
        this.$router.push('../register');
      } else {
        this.$router.push('../auth/login');
        if (this.code === 3001) {
          this.$router.push('../register');
        }
      }
    },
  }
};
</script>

<style scoped>
  @import "../../assets/font_1001665_wneao7ah2ln/iconfont.css";

  *{
    user-select: none;
  }
  .shopping-register{
    background: #f6f6f6;
    width: 100vw;
    height: 100vh;
  }
  .shopping-header{
    width: 100vw;
    height: 260px;
    position: relative;
  }
  .bgimg{
    width: 100vw;
    height: 260px;
  }
  .headerBorder{
    position: absolute;
    top: 100px;
    left: 40px;
    width: 100px;
    height: 100px;
    background: #d8d8d8;
    border-radius: 50%;
    border: 1px solid #ccc;
  }
  .headerBorder>img{
    width: 153px;
    position: absolute;
    top: -25px;
    left: -25px;
  }
  .loginBtn{
    position: absolute;
    top: 132px;
    left: 180px;
    width: 180px;
    height: 50px;
    background: #196fe3;
    line-height: 50px;
    text-align: center;
    font-size: 23px;
    color: white;
    border-radius: 50px;
  }
  .shopping-collect{
    width: 100vw;
    height: 110px;
    margin-top: 13px;
    background: white;
  }
  .shopping-collect>div{
    width:25%;
    float: left;
    box-sizing: border-box;
    text-align: center;
    margin-top: 16px;
  }
  .shopping-collect>div>p{
    font-size: 22px;
    line-height: 0;
  }
  .shopCont{
    font-size: 40px;
    color: #666;
  }
  .myManagement{
    width: 100vw;
    height: 280px;
    background: white;
    margin-top: 10px;
    overflow: hidden;
  }
  .myManagement>div{
    height: 70px;
    width: 100vw;
    line-height: 70px;
    position: relative;
    padding-left: 26px;
  }
  .myManagement>div:active{
    background: #f2f2f3;
  }
  .myManagement>div>span{
    margin-left: 30px;
    color: #555;
  }
  .orderIcon{
    font-size: 30px;
    color: #f45066;
  }
  .bankIcon{
    font-size: 30px;
    color: #2979e5;
  }
  .siteIcon{
    font-size: 30px;
    color: #feb041;
  }
  .discountIcon{
    font-size: 30px;
    color: #ef7fad;
  }
  .reimbursement{
    color: #999;
    position: absolute;
    top: 0;
    right: 100px;
  }
  .indicate{
    color: #c7c6cc;
    position: absolute;
    top: 13px;
    right: 50px;
    font-size: 45px;
  }
  .feedback{
    color: #f54f66;
  }
  .setting{
    color: #2a7ae4;
  }
  .assist{
    color: #feb03f;
  }
  .myAssistCont{
    width: 100vw;
    height: 210px;
    background: white;
    margin-top: 10px;
    overflow: hidden;
  }
  .myAssistCont>div{
    height: 70px;
    width: 100vw;
    line-height: 70px;
    position: relative;
    padding-left: 26px;
  }
  .myAssistCont>div:active{
    background: #f2f2f3;
  }
  .myAssistCont>div>span{
    margin-left: 30px;
    color: #555;
  }
</style>
